<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="profile-page" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-avatar">
        <text class="i-fa-solid:user text-gray-400 text-4xl"></text>
      </view>
      <view class="user-info">
        <text class="user-name">个人用户</text>
        <text class="user-subtitle">提高效率，管理生活</text>
      </view>
    </view>
    
    <!-- 数据统计 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-value">12</text>
        <text class="stat-label">待办任务</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">25</text>
        <text class="stat-label">已完成</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">8</text>
        <text class="stat-label">番茄钟</text>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-section">
        <view class="menu-section-title">个人中心</view>
        
        <!-- 我的统计 -->
        <view class="menu-item">
          <view class="menu-item-left">
            <text class="i-fa-solid:chart-bar text-blue-500"></text>
            <text class="menu-item-label">我的统计</text>
          </view>
          <view class="menu-item-right">
            <text class="i-fa-solid:chevron-right text-gray-400"></text>
          </view>
        </view>
        
        <!-- 我的成就 -->
        <view class="menu-item">
          <view class="menu-item-left">
            <text class="i-fa-solid:trophy text-yellow-500"></text>
            <text class="menu-item-label">我的成就</text>
          </view>
          <view class="menu-item-right">
            <text class="i-fa-solid:chevron-right text-gray-400"></text>
          </view>
        </view>
        
        <!-- 个人设置 -->
        <view class="menu-item" @click="navigateToSettings">
          <view class="menu-item-left">
            <text class="i-fa-solid:cog text-gray-600"></text>
            <text class="menu-item-label">设置</text>
          </view>
          <view class="menu-item-right">
            <text class="i-fa-solid:chevron-right text-gray-400"></text>
          </view>
        </view>
      </view>
      
      <view class="menu-section">
        <view class="menu-section-title">支持</view>
        
        <!-- 帮助中心 -->
        <view class="menu-item">
          <view class="menu-item-left">
            <text class="i-fa-solid:question-circle text-green-500"></text>
            <text class="menu-item-label">帮助中心</text>
          </view>
          <view class="menu-item-right">
            <text class="i-fa-solid:chevron-right text-gray-400"></text>
          </view>
        </view>
        
        <!-- 关于我们 -->
        <view class="menu-item">
          <view class="menu-item-left">
            <text class="i-fa-solid:info-circle text-purple-500"></text>
            <text class="menu-item-label">关于我们</text>
          </view>
          <view class="menu-item-right">
            <text class="i-fa-solid:chevron-right text-gray-400"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'ProfilePage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 导航到设置页面
const navigateToSettings = () => {
  uni.navigateTo({
    url: '/pages/profile/settings',
  })
}
</script>

<style lang="scss">
.profile-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f2f2f7;
}

.user-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
}

.user-avatar {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e0e0e0;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.user-name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.user-subtitle {
  font-size: 14px;
  color: #8e8e93;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  margin: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #007aff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #8e8e93;
}

.menu-list {
  margin: 0 20px 20px;
}

.menu-section {
  margin-bottom: 24px;
}

.menu-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-left: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 8px;
}

.menu-item-left {
  display: flex;
  align-items: center;
}

.menu-item-label {
  margin-left: 12px;
  font-size: 16px;
}

.menu-item-right {
  display: flex;
  align-items: center;
}
</style>
